<template>
  <demoBlock title="对齐方式">
    <!-- 居中 -->
    <vcu-flexbox justify="center">
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
    </vcu-flexbox>

    <!-- 右对齐 -->
    <vcu-flexbox justify="end">
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
    </vcu-flexbox>

    <!-- 两端对齐 -->
    <vcu-flexbox justify="space-between">
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
    </vcu-flexbox>

    <!-- 每个元素的两侧间隔相等 -->
    <vcu-flexbox justify="space-around">
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
      <vcu-flexbox-item span="6">span: 6</vcu-flexbox-item>
    </vcu-flexbox>
  </demoBlock>
</template>
